<template>
  <div class="app-container">
    <el-form :model="formInfo" label-width="120px">
      <el-row type="flex">
        <el-col :span="8">
          <el-form-item label="手机号：">
            {{ formInfo.phoneNum }}
          </el-form-item>
        </el-col>
         <el-col :span="8">
          <el-form-item label="性别：">
            <!-- 不透露 -->
             <el-radio-group :disabled='disable' v-model="formInfo.sex">
              <el-radio :label="true">男</el-radio>
              <el-radio :label="false">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
         <el-col  :span="8">
          <el-form-item label="姓名：">
            <!-- <span v-if='userName !== "" ' >{{ userName }}</span> -->
            <el-input :disabled='disable' v-model="formInfo.userName" placeholder="请输入你的姓名"> </el-input>
          </el-form-item>
        </el-col>
        <el-col  :span="8">
          <el-form-item label="身份证号：">
           <span v-if='formInfo.cardNo == !""'> {{ formInfo.cardNo }}</span>
            <el-input :disabled='disable' v-else v-model="formInfo.cardNo" placeholder="请输入你的身份证号"> </el-input>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formInfo.userType == 'doctor'" type="flex">
       <el-col :span="8">
         <el-form-item label="科室：">
            <el-select @change='change' :disabled='disable' v-model="formInfo.departmentId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.depName"
                :value="item.id">
              </el-option>
            </el-select>
         </el-form-item>
       </el-col>
        <el-col :span="8">
         <el-form-item label="诊室：">
            <el-select :disabled='disable' v-model="formInfo.consultationRoomId" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.id"
                :label="item.consName"
                :value="item.id">
              </el-option>
            </el-select>
         </el-form-item>
       </el-col>
      </el-row>
      <el-row v-if="formInfo.userType == 'doctor'">
        <el-col :span='8'>
          <el-form-item label="说明：">
            <el-input :disabled='disable' type="textarea" v-model="formInfo.remarks"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
         <el-button type="primary" v-if="infoShow" @click="personInfo">修改个人信息</el-button>
         <el-button type="primary" v-else @click="personInfo1">完善个人信息</el-button>
        <el-button type="primary" @click="logout">退出登录</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { patientInfo,getUserInfo,getAllDepName,getZhenById } from '@/api/user'
// import { getUserName } from '@/utils/auth'
import { mapActions } from 'vuex'
export default {
  name:'personInfo',
  data(){
    return{
      formInfo:{
        userName:'',
        cardNo:'',
        departmentId:''
      },
      disable:true,
      infoShow:true,
      options:[],
      options1:[]
      // userName:getUserName()
    }
  },
 async mounted(){
    await this.getUserInfo()
    this.getAllDepName()
    this.change()
  },
  methods: {
    ...mapActions(['user/logout']),
    // 退出登录
    logout() {
      this['user/logout']()
      this.$router.push('/login')
    },
    // 获取个人信息
   async getUserInfo(){
      this.formInfo =  await getUserInfo()
    },
    // 完善个人信息
   async personInfo(){
     this.disable = false 
     this.infoShow = false
    },
    async personInfo1(){
        await patientInfo(this.formInfo)
        this.$message.success('完善个人信息成功')
        this.disable = true
        this.infoShow = true
        this.getUserInfo();
    },
    // 所有科室信息
    async getAllDepName(){
      this.options = await getAllDepName()
    },
    // 通过id查询诊室信息
    async change(event){
      // console.log(event)
      this.options1 = await getZhenById(this.formInfo.departmentId)
    }
  }
}
</script>

<style>

</style>
